<template>
  <div class="head">
    <div class="head_text" v-show="$route.path != '/comicreader'">
      <!-- 头部 -->
      <div class="tab">
        <img src="../assets/homeimg/组 3.png" alt="" />
        <!-- 导航栏 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="Home" name="/home"></el-tab-pane>
          <!-- <el-tab-pane label="Comics" name="/comics"></el-tab-pane> -->
          <el-tab-pane label="Browse" name="/browse"></el-tab-pane>
          <el-tab-pane label="Rankings" name="/rankings"></el-tab-pane>
          <el-tab-pane label="Update" name="/update"></el-tab-pane>
        </el-tabs>
        <!-- 输入框 -->
        <el-input
          placeholder="ROLLING LOVE"
          suffix-icon="el-icon-search"
          v-model="input"
          @input="inputFn"
        >
        </el-input>
        <!-- 登录 -->
        <div class="login">
          <div @click="$router.push('/history')" class="cursor">History</div>
          <div
            class="login_left cursor"
            @mouseover="mouseOver(1)"
            @mouseleave="mouseleave(1)"
          >
            <div>Get the App</div>
            <!-- 下拉框 -->
            <el-collapse-transition>
              <div class="tanchu storeApp" v-show="showApp">
                <div class="getapp noneb">
                  <img src="../assets/homeimg/组 7215.png" alt="" />
                  <div>
                    <el-link
                      :underline="false"
                      href="https://apps.apple.com/us/app/pandanovel/id1560301544"
                      target="_blank"
                    >
                      App Store</el-link
                    >
                  </div>
                </div>
                <div class="getapp">
                  <img src="../assets/homeimg/组 7216.png" alt="" />
                  <div>
                    <el-link :underline="false" target="_blank">
                      Google play</el-link
                    >
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
          <!-- log in Register -->
          <div
            class="login_left cursor"
            @mouseover="mouseOver(2)"
            @mouseleave="mouseleave(2)"
          >
            <div @click="isShowLogin = true" v-show="!uesrtoken">
              log in Register
            </div>
            <img
              class="uesrPhoto"
              v-if="photoUrl != ''"
              :src="photoUrl"
              alt=""
              v-show="uesrtoken"
            />
            <img
              class="uesrPhoto"
              v-if="photoUrl == ''"
              src="../assets/homeimg/组 4200.png"
              alt=""
              v-show="uesrtoken"
            />
            <el-collapse-transition>
              <div class="tanchu reagister" v-show="registerShow && uesrtoken">
                <div class="following noneb" @click="$router.push('following')">
                  <img src="../assets/homeimg/组 7215 (1).png" alt="" />
                  <div>Following</div>
                </div>
                <div class="following" @click="logOutFn">
                  <img src="../assets/homeimg/组 7219.png" alt="" />
                  <div>Log out</div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>
    </div>
    <div class="head_text" v-show="$route.path == '/comicreader'">
      <!-- 头部 -->
      <div class="tab" style="justify-content: space-between">
        <div class="imgbox">
          <img src="../assets/homeimg/组 3.png" alt="" />
          <img
            class="pandaName"
            src="../assets/homeimg/PandaNovel@2x.png"
            alt=""
          />
        </div>
        <div class="titleText">achanteridoijsio</div>
        <!-- 登录 -->
        <div class="login">
          <div
            class="login_left cursor"
            @mouseover="mouseOver(1)"
            @mouseleave="mouseleave(1)"
          >
            <div>Get the App</div>
            <!-- 下拉框 -->
            <el-collapse-transition>
              <div class="tanchu storeApp" v-show="showApp">
                <div class="getapp noneb">
                  <img src="../assets/homeimg/组 7215.png" alt="" />
                  <div>
                    <el-link
                      :underline="false"
                      href="https://apps.apple.com/us/app/pandanovel/id1560301544"
                      target="_blank"
                    >
                      App Store</el-link
                    >
                  </div>
                </div>
                <div class="getapp">
                  <img src="../assets/homeimg/组 7216.png" alt="" />
                  <div>
                    <el-link :underline="false" target="_blank">
                      Google play</el-link
                    >
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
          <!-- log in Register -->
          <div
            class="login_left cursor"
            @mouseover="mouseOver(2)"
            @mouseleave="mouseleave(2)"
          >
            <div @click="isShowLogin = true" v-show="!uesrtoken">
              log in Register
            </div>
            <img
              class="uesrPhoto"
              v-if="photoUrl != ''"
              :src="photoUrl"
              alt=""
              v-show="uesrtoken"
            />
            <img
              class="uesrPhoto"
              v-if="photoUrl == ''"
              src="../assets/homeimg/组 4200.png"
              alt=""
              v-show="uesrtoken"
            />
            <el-collapse-transition>
              <div class="tanchu reagister" v-show="registerShow && uesrtoken">
                <div class="following noneb" @click="$router.push('following')">
                  <img src="../assets/homeimg/组 7215 (1).png" alt="" />
                  <div>Following</div>
                </div>
                <div class="following" @click="logOutFn">
                  <img src="../assets/homeimg/组 7219.png" alt="" />
                  <div>Log out</div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>
    </div>
    <Login @cancelFn="cancelFn" v-show="isShowLogin" />
  </div>
</template>

<script>
// @ is an alias to /src
import Login from "./Home/Login.vue";
export default {
  data() {
    return {
      photoUrl: "", //头像
      activeName: "/home", //tab
      input: "", //输入框  book_name
      isShowLogin: false, //登录框是否显示
      showApp: false, //app下拉框显示
      registerShow: false, //登录下拉框显示
      uesrtoken: false, //用户是否登陆
    };
  },
  methods: {
    // 输入框跳转
    inputFn() {
      // 检测定时器
      if (this.timer) {
        // 如果有定时器,则清除
        clearTimeout(this.timer);
        this.timer = null;
      }
      // 设置定时器和事件
      this.timer = setTimeout(() => {
        this.$store.commit("saveText", this.input);
        this.$router.push("/browse");
      }, 500);
    },
    // 退出登陆
    logOutFn() {
      this.uesrtoken = false;
      localStorage.removeItem("token");
    },
    //  刷新的时候更新tab栏对应路由
    handleClick(tab, event) {
      // console.log(this.activeName);
      this.$router.push(this.activeName);
      // this.$router.push(`/${this.activeName}`);
    },
    // 关闭登录框
    cancelFn(e) {
      console.log(e, "zheshieeeee");
      if (e == 1) {
        this.uesrtoken = true;
      }
      this.isShowLogin = false;
    },
    mouseOver(e) {
      e == 1 ? (this.showApp = true) : (this.registerShow = true);
    },
    mouseleave(e) {
      e == 1 ? (this.showApp = false) : (this.registerShow = false);
    },
  },
  created() {
    this.photoUrl = localStorage.getItem("photoURL");
    if (localStorage.getItem("token")) {
      this.uesrtoken = true;
    }
    this.activeName = this.$route.path;
  },
  components: {
    Login,
  },
};
</script>
<style scoped lang = 'less'>
.head {
  width: 100vw;
  min-width: 1160px;
  height: 50px;
  background: #212121;
  font-size: 12px !important;
  .head_text {
    width: 1160px;
    height: 50px;
    margin: 0 auto;
    padding-top: 5px;
    box-sizing: border-box;
    .tab {
      width: 100%;
      height: 41px;
      /* background-color: #909; */
      display: flex;
      align-items: center;
      img {
        width: 31px;
        height: 27px;
      }
      .imgbox {
        display: flex;
        align-items: center;
        .pandaName {
          width: 85px;
          height: 19px;
          margin-left: 20px;
        }
      }
      .titleText {
        color: #fff;
        font-size: 13px;
        opacity: 0.5;
      }
      /deep/.el-tabs {
        margin-left: 51px;
        color: #fff;
      }
      /deep/.el-tabs__header {
        margin: 0;
      }
      /deep/.el-tabs__item {
        color: #fff;
        opacity: 0.5;
      }
      /deep/.el-tabs__item.is-active {
        color: #fff !important;
        opacity: 1 !important;
      }
      /deep/.el-tabs__nav-wrap::after {
        background-color: #212121;
      }
      /deep/.el-tabs__active-bar {
        opacity: 1 !important;
      }
      /deep/.el-input {
        width: 200px;
        height: 30px;
        border-radius: 23px !important;
        overflow: hidden;
        margin-left: 100px;
        border: 0;
      }
      /deep/.el-input__inner {
        height: 30px;
        background-color: #4e4e4e;
        color: #fff;
        border: none;
      }
      /deep/.el-input__icon {
        width: 30px;
        font-size: 20px;
        line-height: 34px;
        /* line-height: 41px; */
      }
      .login {
        display: flex;
        align-items: center;
        line-height: 22px;
        color: rgba(255, 255, 255, 0.5);
        /* opacity: 0.5; */
        font-size: 14px;
        margin-left: 40px;
        .login_left {
          height: 40px;
          line-height: 40px;
          margin-left: 33px;
          position: relative;
          .uesrPhoto {
            width: 37px;
            height: 37px;
            border-radius: 50%;
          }
          .tanchu {
            left: 0;
            top: 43px;
            position: absolute;
            z-index: 9;
            background: rgba(41, 41, 41, 1);
            border-radius: 0px 0px 12px 12px;
          }
          .reagister {
            width: 150px;
            height: 110px;
            .following {
              padding: 7px 10px;
              box-sizing: border-box;
              height: 55px;
              display: flex;
              align-content: center;
              img {
                width: 26px;
                height: 26px;
                margin-right: 10px;
                margin-top: 6px;
              }
            }
          }
          .noneb {
            border-bottom: 1px solid #454545;
          }
          .storeApp {
            left: -90px;
            display: block;
            width: 181px;
            height: 167px;

            .getapp {
              padding: 20px 0 0 20px;
              display: flex;
              align-content: center;
              height: 83px;
              box-sizing: border-box;
              .el-link {
                color: rgba(255, 255, 255, 0.5);
              }
              img {
                width: 39px;
                height: 39px;
                margin-right: 16px;
              }
            }
          }
        }
      }
    }
  }
  .transition-box {
    margin-bottom: 100px;
    width: 100px;
    height: 500px;
    border-radius: 4px;
    background-color: #409eff;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
}
</style>